import { getAllPosts, type Post } from '@/lib'
import Link from 'next/link'

type PostWithoutContent = Omit<Post, 'content'>
type ArchiveMap = Record<string, PostWithoutContent[]>

export default async function ArchivesPage() {
  const posts = await getAllPosts()
  
  // 按年月分组文章
  const archives = posts.reduce((acc, post) => {
    const date = new Date(post.created_at)
    const yearMonth = `${date.getFullYear()}年${date.getMonth() + 1}月`
    
    if (!acc[yearMonth]) {
      acc[yearMonth] = []
    }
    acc[yearMonth].push(post)
    return acc
  }, {} as ArchiveMap)

  // 按时间倒序排序
  const sortedDates = Object.keys(archives).sort((a, b) => {
    const dateA = new Date(a.replace('年', '-').replace('月', '-1'))
    const dateB = new Date(b.replace('年', '-').replace('月', '-1'))
    return dateB.getTime() - dateA.getTime()
  })

  return (
    <main className="min-h-screen p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-8 dark:text-white">文章归档</h1>
        
        <div className="space-y-12">
          {sortedDates.map(yearMonth => (
            <section key={yearMonth}>
              <h2 className="text-2xl font-semibold mb-6 dark:text-white flex items-center gap-3">
                <span>{yearMonth}</span>
                <span className="text-sm text-gray-500 dark:text-gray-400">
                  ({archives[yearMonth].length} 篇)
                </span>
              </h2>
              <div className="space-y-4 ml-4 border-l-2 border-gray-200 dark:border-gray-700">
                {archives[yearMonth].map(post => (
                  <article 
                    key={post.id} 
                    className="relative pl-6 before:content-[''] before:absolute before:left-[-5px] before:top-3 before:w-2 before:h-2 before:rounded-full before:bg-gray-300 dark:before:bg-gray-600"
                  >
                    <time className="text-sm text-gray-500 dark:text-gray-400">
                      {new Date(post.created_at).toLocaleDateString('zh-CN')}
                    </time>
                    <h3 className="text-lg font-medium mt-1">
                      <Link 
                        href={`/posts/${post.id}`}
                        className="hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400"
                      >
                        {post.title}
                      </Link>
                    </h3>
                    <div className="mt-2 flex gap-2">
                      {post.category && (
                        <span className="text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded">
                          {post.category.name}
                        </span>
                      )}
                      {
                      post.tags
                      .filter(tag => post.category?.name !== tag)
                      .map((tag, index) => (
                        (
                          <span 
                            key={`${post.id}-${tag}-${index}`}
                            className="text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-2 py-0.5 rounded"
                          >
                            {tag}
                          </span>
                        )
                      ))
                      }
                    </div>
                  </article>
                ))}
              </div>
            </section>
          ))}
        </div>
      </div>
    </main>
  )
} 